<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
  </head>
  <style>
    header {
      width: 100;
      height: 1rem;
    }

    header div {
      width: 100%;
      height: 100%;
    }

    a {
      display: inline-block;
      height: 100%;
      width: 25%;
      font-weight: 0.32rem;
      color: #000;
      text-decoration: none;
    }
  </style>
  <body>
    <header>
      <div>
        <a href="sharePage.html">1</a>
        <a href="sharePage2.html">2</a>
        <a href="sharePage3.html">3</a>
        <a href="invite.html">4</a>
      </div>
    </header>
  </body>
  <script>
    function init() {
      var width = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = width / 7.5 + "px";
    }
    init();
    window.addEventListener("orientationchange", init);
    window.addEventListener("resize", init);
  </script>
</html>
